<template>
    <div class="leftOne">
        <ThemeTitle :title="title" />
        <div class="landArea">
            <div class="landIcon">
                <img src="/data/images/hngk/ceng.png" alt="" />
            </div>
            <div class="landDetail">
                <div class="title">数据接入总量</div>
                <div class="num">
                    <div>
                        <span>46826</span>
                        <span>条</span>
                    </div>
                    <div>
                        <span>1.2</span>
                        <span>T</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">数据分类统计</div>
            </div>
        </div>
        <div class="twoCharts">
            <div id="activeChart"></div>
            <div id="videoChart"></div>
        </div>
        <div class="geoIntroSJLY">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">数据利用情况</div>
            </div>
        </div>
        <div class="useState">
            <div class="useState1">
                <div>推送国家部委</div>
                <div>4458条</div>
            </div>
            <div class="rightan useState2"></div>
            <div class="useState3">
                <div class="diyige1">
                    <div>自然灾害系统</div>
                    <div>16783条</div>
                </div>
                <div class="rightan diyige2"></div>
                <div class="diyige3">
                    <div>数据资源</div>
                    <div>46826条</div>
                </div>
                <div class="rightan diyige4"></div>
                <div class="diyige5">
                    <div>安全生产系统</div>
                    <div>18352条</div>
                </div>
            </div>
            <div class="rightan useState4"></div>
            <div class="useState5">
                <div>市县系统应用</div>
                <div>3120条</div>
            </div>
        </div>
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">数据接入单位</div>
            </div>
        </div>
        <div id="descChart"></div>
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle";
import { onMounted, ref, provide } from "vue";
import { useRouter } from "vue-router";
import echarts from "echarts";
export default {
    components: {
        ThemeTitle,
    },
    setup() {
        const title = provide("title", "数据总览");

        function drawActiveChart() {
            var dom = document.getElementById("activeChart");
            var myChart = echarts.init(dom);
            let option = {
                animation: true,
                title: {
                    text: "动态",
                    show: true,
                    // "subtext": "火点类型",
                    x: "35%",
                    y: "center",
                    textStyle: {
                        color: "#fff",
                        fontSize: 12,
                        fontWeight: "normal",
                        align: "center",
                        width: "200px",
                    },
                    subtextStyle: {
                        color: "#fff",
                        fontSize: 12,
                        fontWeight: "normal",
                        align: "center",
                    },
                },
                series: [
                    {
                        type: "pie",
                        center: ["45%", "50%"],
                        radius: ["65%", "90%"],
                        color: ["#2ECACE", "#2039C3"],
                        startAngle: 35,
                        labelLine: {
                            normal: {
                                length: 0,
                                length2: 0,
                            },
                        },
                        label: {
                            normal: {
                                formatter: "{b|{b}:}\n {per|{d}%} ",
                                backgroundColor: "rgba(255, 147, 38, 0)",
                                borderColor: "transparent",
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: "#999",
                                        lineHeight: 20,
                                        align: "center",
                                    },
                                    hr: {
                                        borderColor: "#aaa",
                                        width: "100%",
                                        borderWidth: 1,
                                        height: 0,
                                    },
                                    b: {
                                        color: "#b3e5ff",
                                        fontSize: 10,
                                        lineHeight: 15,
                                    },
                                    c: {
                                        fontSize: 14,
                                        color: "#eee",
                                    },
                                    per: {
                                        color: "#FDF44E",
                                        fontSize: 10,
                                        padding: [1, 1],
                                        borderRadius: 2,
                                    },
                                },

                                color: "#fff",
                                fontSize: 12,
                            },
                        },
                        emphasis: {
                            show: false,
                            position: [-50, -50],
                            label: {
                                show: true,
                                formatter: "{b|{b}:}  {per|{d}%}  ",
                                backgroundColor: "rgba(255, 147, 38, 0)",
                                borderColor: "transparent",
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: "#999",
                                        lineHeight: 22,
                                        align: "center",
                                    },
                                    hr: {
                                        borderColor: "#aaa",
                                        width: "100%",
                                        borderWidth: 1,
                                        height: 0,
                                    },
                                    b: {
                                        color: "#fff",
                                        fontSize: 18,
                                        lineHeight: 33,
                                    },
                                    c: {
                                        fontSize: 14,
                                        color: "#eee",
                                    },
                                    per: {
                                        color: "#FDF44E",
                                        fontSize: 25,
                                        padding: [5, 6],
                                        borderRadius: 2,
                                    },
                                },
                            },
                        },
                        data: [
                            {
                                name: "非静态",
                                value: 31.54,
                            },
                            {
                                name: "静态",
                                value: 68.46,
                            },
                        ],
                    },
                    {
                        type: "pie",
                        center: ["45%", "50%"],
                        radius: ["55%", "57%"],
                        label: {
                            show: false,
                        },
                        data: [
                            {
                                value: 78,
                                name: "实例1",
                                itemStyle: {
                                    color: {
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        type: "linear",
                                        global: false,
                                        // colorStops: [{
                                        //     offset: 0,
                                        //     color: "#9F17FF"
                                        // }, {
                                        //     offset: 0.2,
                                        //     color: "#01A4F7"
                                        // }, {
                                        //     offset: 0.5,
                                        //     color: "#FE2C8A"
                                        // }, {
                                        //     offset: 0.8,
                                        //     color: "#FEE449"
                                        // }, {
                                        //     offset: 1,
                                        //     color: "#00FFA8"
                                        // }],
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 0.2,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 0.5,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 0.8,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 1,
                                                color: "#fff",
                                            },
                                        ],
                                    },
                                },
                            },
                        ],
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
        function drawVideoChart() {
            var dom = document.getElementById("videoChart");
            var myChart = echarts.init(dom);
            let option = {
                animation: true,
                title: {
                    show: true,
                    text: "视频",
                    // "subtext": "火点类型",
                    x: "36%",
                    y: "center",
                    textStyle: {
                        color: "#fff",
                        fontSize: 12,
                        fontWeight: "normal",
                        align: "center",
                        width: "200px",
                    },
                    subtextStyle: {
                        color: "#fff",
                        fontSize: 12,
                        fontWeight: "normal",
                        align: "center",
                    },
                },

                series: [
                    {
                        type: "pie",
                        center: ["48%", "50%"],
                        radius: ["65%", "90%"],
                        color: ["#2ECACE", "#2039C3"],
                        startAngle: 160,
                        labelLine: {
                            normal: {
                                length: 0,
                                length2: 0,
                            },
                        },
                        label: {
                            // position:'inside',
                            formatter: "{b|{b}:}\n {per|{d}%} ",
                            backgroundColor: "rgba(255, 147, 38, 0)",
                            borderColor: "transparent",
                            borderRadius: 4,
                            rich: {
                                a: {
                                    color: "#999",
                                    lineHeight: 20,
                                    align: "center",
                                },
                                hr: {
                                    borderColor: "#aaa",
                                    width: "100%",
                                    borderWidth: 1,
                                    height: 0,
                                },
                                b: {
                                    color: "#b3e5ff",
                                    fontSize: 10,
                                    lineHeight: 15,
                                },
                                c: {
                                    fontSize: 14,
                                    color: "#eee",
                                },
                                per: {
                                    color: "#FDF44E",
                                    fontSize: 10,
                                    padding: [1, 1],
                                    borderRadius: 2,
                                },
                            },

                            color: "#fff",
                            fontSize: 14,
                        },
                        emphasis: {
                            show: false,
                            position: [0, 50],
                            label: {
                                show: true,
                                formatter: "{b|{b}:}{per|{d}%}",
                                backgroundColor: "rgba(255, 147, 38, 0)",
                                borderColor: "transparent",
                                borderRadius: 4,

                                rich: {
                                    a: {
                                        color: "#999",
                                        lineHeight: 22,
                                        align: "center",
                                    },
                                    hr: {
                                        borderColor: "#aaa",
                                        width: "100%",
                                        borderWidth: 1,
                                        height: 0,
                                    },
                                    b: {
                                        color: "#fff",
                                        fontSize: 18,
                                        lineHeight: 33,
                                    },
                                    c: {
                                        fontSize: 14,
                                        color: "#eee",
                                    },
                                    per: {
                                        color: "#FDF44E",
                                        fontSize: 25,
                                        padding: [5, 6],
                                        borderRadius: 2,
                                    },
                                },
                            },
                        },
                        data: [
                            {
                                name: "视频",
                                value: 85.13,
                            },
                            {
                                name: "非视频",
                                value: 14.87,
                            },
                        ],
                    },
                    {
                        type: "pie",
                        center: ["48%", "50%"],
                        radius: ["55%", "57%"],
                        label: {
                            show: false,
                        },
                        data: [
                            {
                                value: 78,
                                name: "实例1",
                                itemStyle: {
                                    color: {
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        type: "linear",
                                        global: false,
                                        // colorStops: [{
                                        //     offset: 0,
                                        //     color: "#9F17FF"
                                        // }, {
                                        //     offset: 0.2,
                                        //     color: "#01A4F7"
                                        // }, {
                                        //     offset: 0.5,
                                        //     color: "#FE2C8A"
                                        // }, {
                                        //     offset: 0.8,
                                        //     color: "#FEE449"
                                        // }, {
                                        //     offset: 1,
                                        //     color: "#00FFA8"
                                        // }],
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 0.2,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 0.5,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 0.8,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 1,
                                                color: "#fff",
                                            },
                                        ],
                                    },
                                },
                            },
                        ],
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
        function drawBar() {
            var dom = document.getElementById("descChart");
            var myChart = echarts.init(dom);
            var option = {
                grid: [
                    {
                        //左侧的柱状图grid
                        width: "90%",
                        left: "1%",
                        top: "10%",
                        right: "0",
                        bottom: "0",
                    },
                ],
                xAxis: [
                    {
                        //左侧柱状图的X轴
                        gridIndex: 0, //x 轴所在的 grid 的索引
                        show: false,
                    },
                    {
                        //右侧柱状图的X轴
                        gridIndex: 1, //x 轴所在的 grid 的索引
                        show: false,
                    },
                ],
                yAxis: [
                    {
                        //左侧柱状图的Y轴
                        gridIndex: 0, //y轴所在的 grid 的索引
                        splitLine: "none",
                        axisTick: "none",
                        axisLine: "none",
                        axisLabel: {
                            verticalAlign: "bottom",
                            align: "left",
                            padding: [0, 0, 10, 15],
                            // textStyle: {
                            color: "#befbff",
                            fontSize: "12",
                            // }
                        },
                        data: [
                            "省应急厅",
                            "省气象局",
                            "省测绘地理信息局",
                            "省大数据局",
                            "省地震局",
                        ], //'省地震局',"气象局预报中心",'海洋监测预报中心','省水利厅','省民政减灾救灾',
                        inverse: true,
                    },
                    {
                        //左侧柱状图的Y轴
                        gridIndex: 0, //y轴所在的 grid 的索引
                        splitLine: "none",
                        axisTick: "none",
                        axisLine: "none",
                        data: [12741, 9631, 7854, 6354, 5123], //,4900,4300,4120,4000,3890
                        inverse: true,
                        axisLabel: {
                            show: true,
                            verticalAlign: "bottom",
                            align: "right",
                            padding: [0, 20, 10, 0],
                            // textStyle: {
                            color: "#fff",
                            fontSize: "16",
                            // },
                            formatter: function (value) {
                                return "{x|" + value + "}  {y|个" + "}";
                            },
                            rich: {
                                y: {
                                    color: "#befbff",
                                    fontSize: 12,
                                },
                                x: {
                                    color: "#befbff",
                                    fontSize: 12,
                                },
                            },
                        },
                    },
                    {
                        //左侧柱状图的Y轴
                        gridIndex: 0, //y轴所在的 grid 的索引
                        splitLine: "none",
                        axisTick: "none",
                        axisLine: "none",
                        data: [],
                    },
                ],
                series: [
                    {
                        name: "值",
                        type: "bar",
                        xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        data: [12741, 9631, 7854, 6354, 5123], //,4900,4300,4120,4000,3890
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                //color: 'rgba(102,159,239,1)',
                                color:
                                    //'rgba(255,255,255,1)',
                                    new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 0,
                                                color: "rgba(0,222,255,0.3)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(0,222,255,0.8)", // 100% 处的颜色
                                            },
                                        ],
                                        false
                                    ),
                                borderRadius: 6,
                            },
                        },
                        z: 2,
                    },
                    {
                        name: "外框",
                        type: "bar",
                        xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex: 2, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        barGap: "-100%",
                        data: [13000, 13000, 13000, 13000, 13000],
                        barWidth: 10,
                        itemStyle: {
                            color: "rgba(0,222,255,0)",
                            borderRadius: 6,
                        },
                        z: 0,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }

        onMounted(() => {
            drawActiveChart();
            drawVideoChart();
            drawBar();
        });
        return {
            title,
        };
    },
};
</script>
<style >
@-webkit-keyframes rightan {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.rightan {
    animation: rightan 2s infinite;
    animation-fill-mode: both;
}
@keyframes bounceRight {
    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    50% {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }

    80% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
}
.bounceRight {
    animation: bounceRight 2s infinite;
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .leftOne {
        .landArea {
            width: vw(365);
            height: vh(132);
            margin-top: vh(25);
            background: url('/data/images/hngk/bigrec.png') no-repeat;
            background-size: 100% 100%;
            padding: vh(25) vw(37) vh(28) vw(33);
            display: flex;
            align-items: center;

            .landIcon {
                margin-right: vw(30);
            }

            .landDetail {
                width: vw(220);

                .title {
                    font-size: vw(18);
                    cursor: pointer;
                }

                .num {
                    display: flex;
                    margin-top: vh(17);

                    div:first-child {
                        span:first-child {
                            color: rgba(233, 209, 74, 1);
                            font-size: vw(30);
                        }
                    }

                    div:last-child {
                        font-size: vw(16);
                        background: none;
                        flex-shrink: 0;
                        width: vw(18);
                        margin-left: vw(50);

                        span:first-child {
                            color: rgba(233, 209, 74, 1);
                            font-size: vw(30);
                        }
                    }
                }
            }
        }

        .twoCharts {
            height: vh(110);
            width: 100%;
            margin-top: vh(20);
            display: flex;
            align-items: center;

            #activeChart {
                flex: 1;
                height: vh(110);
            }

            #videoChart {
                flex: 1;
                height: vh(110);
            }
        }

        #descChart {
            width: 100%;
            height: vh(200);
        }

        .useState {
            width: 100%;
            height: vh(300);
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            .useState1 {
                background: url('/data/images/sjhj/liyong1.png') no-repeat;
                background-size: 100% 100%;
                width: vw(102);
                height: vh(58);

                div:nth-child(1) {
                    width: 100%;
                    height: vh(29);
                    line-height: vh(29);
                    text-align: center;
                    color: rgba(71, 217, 253, 1);
                    font-size: vw(14);
                }

                div:nth-child(2) {
                    width: 100%;
                    height: vh(29);
                    line-height: vh(29);
                    text-align: center;
                    color: #fff;
                    font-size: vw(12);
                }
            }

            .useState2 {
                background: url('/data/images/sjhj/shang.png') no-repeat;
                background-size: 100% 100%;
                width: vw(21);
                height: vh(36);
            }

            .useState3 {
                display: flex;
                align-items: center;

                div.diyige1 {
                    background: url('/data/images/sjhj/liyong1.png') no-repeat;
                    background-size: 100% 100%;
                    width: vw(102);
                    height: vh(58);

                    div:nth-child(1) {
                        width: 100%;
                        height: vh(29);
                        line-height: vh(29);
                        text-align: center;
                        color: rgba(71, 217, 253, 1);
                        font-size: vw(14);
                    }

                    div:nth-child(2) {
                        width: 100%;
                        height: vh(29);
                        line-height: vh(29);
                        text-align: center;
                        color: #fff;
                        font-size: vw(12);
                    }
                }

                div.diyige2 {
                    background: url('/data/images/sjhj/zuo.png') no-repeat;
                    background-size: 100% 100%;
                    width: vw(36);
                    height: vh(21);
                }

                div.diyige3 {
                    background: url('/data/images/sjhj/zhong.png') no-repeat;
                    background-size: 100% 100%;
                    width: vw(87);
                    height: vh(74);

                    div:nth-child(1) {
                        width: 100%;
                        height: vh(37);
                        line-height: vh(37);
                        text-align: center;
                        color: rgba(71, 217, 253, 1);
                        font-size: vw(14);
                    }

                    div:nth-child(2) {
                        width: 100%;
                        height: vh(37);
                        line-height: vh(37);
                        text-align: center;
                        color: #fff;
                        font-size: vw(12);
                    }
                }

                div.diyige4 {
                    background: url('/data/images/sjhj/you.png') no-repeat;
                    background-size: 100% 100%;
                    width: vw(36);
                    height: vh(21);
                }

                div.diyige5 {
                    background: url('/data/images/sjhj/liyong1.png') no-repeat;
                    background-size: 100% 100%;
                    width: vw(102);
                    height: vh(58);

                    div:nth-child(1) {
                        width: 100%;
                        height: vh(29);
                        line-height: vh(29);
                        text-align: center;
                        color: rgba(71, 217, 253, 1);
                        font-size: vw(14);
                    }

                    div:nth-child(2) {
                        width: 100%;
                        height: vh(29);
                        line-height: vh(29);
                        text-align: center;
                        color: #fff;
                        font-size: vw(12);
                    }
                }
            }

            .useState4 {
                background: url('/data/images/sjhj/xia.png') no-repeat;
                background-size: 100% 100%;
                width: vw(21);
                height: vh(36);
            }

            .useState5 {
                background: url('/data/images/sjhj/liyong1.png') no-repeat;
                background-size: 100% 100%;
                width: vw(102);
                height: vh(58);

                div:nth-child(1) {
                    width: 100%;
                    height: vh(29);
                    line-height: vh(29);
                    text-align: center;
                    color: rgba(71, 217, 253, 1);
                    font-size: vw(14);
                }

                div:nth-child(2) {
                    width: 100%;
                    height: vh(29);
                    line-height: vh(29);
                    text-align: center;
                    color: #fff;
                    font-size: vw(12);
                }
            }

            .countryAndCity {
                flex-shrink: 0;
                width: vw(119);
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                div:nth-child(1) {
                    width: vw(118);
                    height: vh(58);
                    background: url('/data/images/sjhj/rightRec.png') no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    line-height: vh(29);
                    text-align: center;

                    div:nth-child(1) {
                        font-size: vw(16);
                        color: rgba(80, 255, 255, 1);
                    }

                    div:nth-child(2) {
                        font-size: vw(14);
                        color: #fff;
                    }
                }

                div:nth-child(2) {
                    width: vw(118);
                    height: vh(58);
                    background: url('/data/images/sjhj/rightRec.png') no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    line-height: vh(29);
                    text-align: center;

                    div:nth-child(1) {
                        font-size: vw(16);
                        color: rgba(255, 184, 60, 1);
                    }

                    div:nth-child(2) {
                        font-size: vw(14);
                        color: #fff;
                    }
                }
            }
        }

        .geoIntro {
            width: vw(365);
            margin-top: vh(18);

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw(16);
                }
            }

            .geoCarousel {
                width: vw(365);
                height: vh(172);
                border: 1px solid #0c4259;
                padding-top: vh(8);
                padding-left: vw(8);

                .carouseContent {
                    display: flex;

                    .carouseImg {
                        flex-shrink: 0;
                        width: vw(163);
                        height: vh(135);
                        margin-right: vw(12);
                        border: 1px solid #ddd;
                    }

                    .carouseWord {
                        flex-shrink: 0;
                        width: vw(168);
                        height: vh(139);
                        padding: vh(12) vw(0);
                        line-height: vh(17);
                    }
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .leftOne {
        .landArea {
            width: vw1(414);
            height: vh(200);
            margin-top: vh(25);
            background: url('/data/images/hngk/bigrec.png') no-repeat;
            background-size: 100% 100%;
            padding: vh(25) vw1(37) vh(28) vw1(33);
            display: flex;
            align-items: center;

            .landIcon {
                margin-right: vw1(30);
            }

            .landDetail {
                width: vw1(220);

                .title {
                    font-size: vw1(18);
                    cursor: pointer;
                }

                .num {
                    display: flex;
                    margin-top: vh(17);

                    div:first-child {
                        span:first-child {
                            color: rgba(233, 209, 74, 1);
                            font-size: vw1(30);
                        }
                    }

                    div:last-child {
                        font-size: vw1(16);
                        background: none;
                        flex-shrink: 0;
                        width: vw1(18);
                        margin-left: vw1(50);

                        span:first-child {
                            color: rgba(233, 209, 74, 1);
                            font-size: vw1(30);
                        }
                    }
                }
            }
        }

        .twoCharts {
            height: vh(400);
            width: vw1(414);
            margin-top: vh(20);
            align-items: center;

            #activeChart {
                height: vh(200);
            }

            #videoChart {
                height: vh(200);
            }
        }

        #descChart {
            width: vw1(880);
            height: vh(200);
        }

        .geoIntroSJLY {
            width: vw1(414);
            margin-top: vh(18);
            position: absolute;
            top: vh(10);
            right: vw1(20);

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw1(2);
                    height: vh(15);
                    margin-right: vw1(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw1(16);
                }
            }
        }

        .useState {
            width: vw1(414);
            height: vh(300);
            position: absolute;
            top: vh(200);
            right: vw1(20);
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            .useState1 {
                background: url('/data/images/sjhj/liyong1.png') no-repeat;
                background-size: 100% 100%;
                width: vw1(102);
                height: vh(58);

                div:nth-child(1) {
                    width: 100%;
                    height: vh(29);
                    line-height: vh(29);
                    text-align: center;
                    color: rgba(71, 217, 253, 1);
                    font-size: vw1(14);
                }

                div:nth-child(2) {
                    width: 100%;
                    height: vh(29);
                    line-height: vh(29);
                    text-align: center;
                    color: #fff;
                    font-size: vw1(12);
                }
            }

            .useState2 {
                background: url('/data/images/sjhj/shang.png') no-repeat;
                background-size: 100% 100%;
                width: vw1(21);
                height: vh(36);
            }

            .useState3 {
                display: flex;
                align-items: center;

                div.diyige1 {
                    background: url('/data/images/sjhj/liyong1.png') no-repeat;
                    background-size: 100% 100%;
                    width: vw1(102);
                    height: vh(58);

                    div:nth-child(1) {
                        width: 100%;
                        height: vh(29);
                        line-height: vh(29);
                        text-align: center;
                        color: rgba(71, 217, 253, 1);
                        font-size: vw1(14);
                    }

                    div:nth-child(2) {
                        width: 100%;
                        height: vh(29);
                        line-height: vh(29);
                        text-align: center;
                        color: #fff;
                        font-size: vw1(12);
                    }
                }

                div.diyige2 {
                    background: url('/data/images/sjhj/zuo.png') no-repeat;
                    background-size: 100% 100%;
                    width: vw1(36);
                    height: vh(21);
                }

                div.diyige3 {
                    background: url('/data/images/sjhj/zhong.png') no-repeat;
                    background-size: 100% 100%;
                    width: vw1(87);
                    height: vh(74);

                    div:nth-child(1) {
                        width: 100%;
                        height: vh(37);
                        line-height: vh(37);
                        text-align: center;
                        color: rgba(71, 217, 253, 1);
                        font-size: vw1(14);
                    }

                    div:nth-child(2) {
                        width: 100%;
                        height: vh(37);
                        line-height: vh(37);
                        text-align: center;
                        color: #fff;
                        font-size: vw1(12);
                    }
                }

                div.diyige4 {
                    background: url('/data/images/sjhj/you.png') no-repeat;
                    background-size: 100% 100%;
                    width: vw1(36);
                    height: vh(21);
                }

                div.diyige5 {
                    background: url('/data/images/sjhj/liyong1.png') no-repeat;
                    background-size: 100% 100%;
                    width: vw1(102);
                    height: vh(58);

                    div:nth-child(1) {
                        width: 100%;
                        height: vh(29);
                        line-height: vh(29);
                        text-align: center;
                        color: rgba(71, 217, 253, 1);
                        font-size: vw1(14);
                    }

                    div:nth-child(2) {
                        width: 100%;
                        height: vh(29);
                        line-height: vh(29);
                        text-align: center;
                        color: #fff;
                        font-size: vw1(12);
                    }
                }
            }

            .useState4 {
                background: url('/data/images/sjhj/xia.png') no-repeat;
                background-size: 100% 100%;
                width: vw1(21);
                height: vh(36);
            }

            .useState5 {
                background: url('/data/images/sjhj/liyong1.png') no-repeat;
                background-size: 100% 100%;
                width: vw1(102);
                height: vh(58);

                div:nth-child(1) {
                    width: 100%;
                    height: vh(29);
                    line-height: vh(29);
                    text-align: center;
                    color: rgba(71, 217, 253, 1);
                    font-size: vw1(14);
                }

                div:nth-child(2) {
                    width: 100%;
                    height: vh(29);
                    line-height: vh(29);
                    text-align: center;
                    color: #fff;
                    font-size: vw1(12);
                }
            }

            .countryAndCity {
                flex-shrink: 0;
                width: vw1(119);
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                div:nth-child(1) {
                    width: vw1(118);
                    height: vh(58);
                    background: url('/data/images/sjhj/rightRec.png') no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    line-height: vh(29);
                    text-align: center;

                    div:nth-child(1) {
                        font-size: vw1(16);
                        color: rgba(80, 255, 255, 1);
                    }

                    div:nth-child(2) {
                        font-size: vw1(14);
                        color: #fff;
                    }
                }

                div:nth-child(2) {
                    width: vw1(118);
                    height: vh(58);
                    background: url('/data/images/sjhj/rightRec.png') no-repeat;
                    background-size: 100% 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    line-height: vh(29);
                    text-align: center;

                    div:nth-child(1) {
                        font-size: vw1(16);
                        color: rgba(255, 184, 60, 1);
                    }

                    div:nth-child(2) {
                        font-size: vw1(14);
                        color: #fff;
                    }
                }
            }
        }

        .geoIntro {
            width: vw1(414);
            margin-top: vh(18);

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw1(2);
                    height: vh(15);
                    margin-right: vw1(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw1(16);
                }
            }

            .geoCarousel {
                width: vw1(365);
                height: vh(172);
                border: 1px solid #0c4259;
                padding-top: vh(8);
                padding-left: vw1(8);

                .carouseContent {
                    display: flex;

                    .carouseImg {
                        flex-shrink: 0;
                        width: vw1(163);
                        height: vh(135);
                        margin-right: vw1(12);
                        border: 1px solid #ddd;
                    }

                    .carouseWord {
                        flex-shrink: 0;
                        width: vw1(168);
                        height: vh(139);
                        padding: vh(12) vw1(0);
                        line-height: vh(17);
                    }
                }
            }
        }
    }
}
</style>